<template>
	<div>
		<div class="list">
			<div class="panel" v-for="(v,i) in list" v-if="i<3">
				<div class="head ellipsis">皮重异常</div>
				<div class="con ellipsis">
					业务余量不足业务余量不足业务余量不足业务余量不
				</div>
				<div class="foot">
					<div class="time">16分钟前</div>
					<el-button  type="text" size="mini" v-if="type=='msg'">查看详情</el-button>
					<el-button  type="text" size="mini" v-else>去处理</el-button>
				</div>
			</div>
		</div>
		<div class="foot_operation" v-if="list.length">
			<el-button  type="text" size="mini">查看更多{{name}}</el-button>
			<span class="ignore" v-if="ignoreAll">忽略全部</span>
		</div>
		<div class="no_data" v-else>暂无{{name}}</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			},
			url: {
				type: String,
				default() {
					return ''
				}
			},
			type: {
				type: String,
				default() {
					return ''
				}
			},
			name: {
				type: String,
				default() {
					return ''
				}
			},
			ignoreAll:{
				type:Boolean,
				default(){
					return false;
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
::v-deep{
	.el-button--text{
		padding: 0;
	}
}
.panel{
	position: relative;
	padding:14px 0;
	line-height: 18px;
	font-size: 14px;
	&:last-child{
		&::after{
			display: none;
		}
	}
	&::after{
		content: "";
		position: absolute;
		left: -12px;
		right: -12px;
		bottom: 0;
		height: 1px;
		background-color: #eee;
	}
	.head{
		margin-bottom: 6px;
		color: #333;
	}
	.con{
		margin-bottom: 10px;
		color: #666;
	}
	.foot{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #999;
	}
	.operation{
		font-size: 12px;
	}
}
.more{
}
.foot_operation{
	margin-top: 7px;
	text-align: center;
	font-size:12px;
}
.ignore{
	margin-left: 20px;
	color: #999;
	cursor: pointer;
}
.no_data{
	padding: 45px 0;
	text-align: center;
	font-size: 12px;
	color: #999;
}
.ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.c_main{
		color: #1890FF;
}
</style>